import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import Table from './Table'
import NavLink from './NavLink'

import {myAjax} from './../publicAPI/publicAPI'

class CouponEditor extends Component {

    constructor(props, context) {
        super(props, context)
        console.log("初始化")
        this.state = {
           
        };// 初始化状态
    }

    componentWillMount() {
        console.log("将安装")
    }

    componentDidMount() {
        console.log("安装成功")
    }


    
    handlePageClick(e) {//1为下一页，2为上一页
        const _buttonValue = e.target.value
        fetch('https://api.github.com/users/js', { 
            method: 'GET', 
            headers: { 
              "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
            }, 
           
            })
            .then(response => console.log(response)) 
            .then(function (data) { 
                console.log('Request succeeded with JSON response', data); 
            }) 
            .catch(function (error) { 
                console.log('Request failed', error); 
            });
        if(_buttonValue == 1) {
            this.setState({page: this.state.page + 1})
            
        } else {
            this.setState({page: this.state.page - 1})
        }
        
    }


    tHead() {
        var data = [
            {name: "id"},
            {name: "优惠券名称"},
            {name: "有效期"},
            {name: "使用日期"},
            {name: "状态"},
            
        ];
        const _headArr = [];
        const _width = {
            "0":"20%",
            "1":"20%",
            "2":"20%",
            "3":"20%",
            "4":"20%",
         
        };
       
        _headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1"
                                                    key={index}>{item.name}</th>));
        return _headArr;
    }

    tBody() {
        const _data = [
            {id:"1",data:"2016-7-11", record: "发学院支付+5", remark: "无"},
            {id:"2",data:"2016-7-11", record: "发学院支付+5", remark: "无"},
            {id:"3",data:"2016-7-11", record: "发学院支付+5", remark: "无"},
            {id:"4",data:"2016-7-11", record: "发学院支付+5", remark: "无"},
        ];
        
        return _data.map((item,index) => <tr key={index}>
            <td>{item.data}</td>
            <td>{item.record}</td>
            <td>{item.remark}</td>
            <td>
             111
            </td>
             <td>
             111
            </td>
        </tr>);
    }

    render() {
        console.log("理发师管理" + "渲染" + this.state.page)
        return (
            	<div className="right-wapper" style={{height: this.state.rHeight}}>
	    		    		
	    		<div className="rt-wrap">
	    			<h3 className="catagory">
	    				<span className="cata-title">优惠券</span>
	    				<button className="next" value="1" onClick={(e) => this.handlePageClick(e)}></button>
	    				<button className="prev" value="2" onClick={(e) => this.handlePageClick(e)}></button>
	    			</h3>
	    			<Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()}/>
	    		</div>
	    		
	    	</div>

        )
    }
}

export default CouponEditor
